<template>
    <AntdConfirmModal title="新建井" ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
            <GdMap :longitude="form.longitude" :latitude="form.latitude" @setAddress="setAddress" @setLnglat="setLnglat">
            </GdMap>
            <a-form :model="form">
                <a-row style="margin-top:15px">
                    <a-col :span="24">
                        <a-form-item label="纬度">
                            <a-input-number v-model:value="form.latitude" controls-position="right" :step="0.0001"
                                style="width:100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="经度">
                            <a-input-number v-model:value="form.longitude" controls-position="right" :step="0.0001"
                                style="width:100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row gutter="15">
                    <a-col :span="12">
                        <a-form-item label="井ID" name="wellId" :rules="[{ required: true, message: '请输入井ID' }]">
                            <a-input v-model:value="form.wellId" style="width:100%" placeholder="请输入井号" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="井名称" name="wellName" :rules="[{ required: true, message: '请输入井名称' }]">
                            <a-input v-model:value="form.wellName" style="width:100%" placeholder="请输入井名" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row gutter="15">
                    <a-col :span="8">
                        <a-form-item label-width="10px">
                            <a-input v-model:value="form.province" placeholder="省" style="width:100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label-width="10px">
                            <a-input v-model:value="form.city" placeholder="市" style="width:100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label-width="10px">
                            <a-input v-model:value="form.county" placeholder="区" style="width:100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
    </AntdConfirmModal>
</template>
<script setup>
import { createOne, queryList } from '@/custom/well/api/well'
import GdMap from '../../structure/components/map.vue'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const emit = defineEmits(["close"]);
const form = ref({
    operator: '',
    field: '',
    location: '',
    province: '',
    city: '',
    state: '',
    country: '',
    county: '',
    latitude: 44,
    longitude: 124,
    wellId: '',
    wellName: '',
    h2s: false,
    co2: false
})
function setAddress(e) {
    form.value.country = e.country
    form.value.province = e.province
    form.value.city = e.city
    form.value.county = e.district
}
function setLnglat(e) {
    console.log(e)
    form.value.latitude = e.lat
    form.value.longitude = e.lng
}

// 提交
function submitForm() {
    createOne(form.value).then((response) => {
        $.$modal.msgSuccess("新增成功");
        modalRef.value.closeModal()
    });
}
</script>